<template>
  <div class="flex flex-col items-center justify-center w-screen h-screen items-cecenter">
    <h1 class="text-2xl font-bold">
      <router-link to="/">{{ $t('title') }}</router-link>
    </h1>
    <p>count:{{ count }}</p>
    <p>double:{{ doubleCount }}</p>
    <el-button type="primary" @click="increment">增加</el-button>
    <p>{{ $t('title') }}</p>
    <p>当前语言：{{ lang }}</p>
    <div class="flex gap-2">
      <el-button type="primary" @click="changeLang('zh_CN')">切换中文</el-button>
      <el-button type="primary" @click="changeLang('en')">切换英文</el-button>
    </div>
    <div v-if="mockData?.username">
      <p>Mock 数据： {{ mockData?.username }}</p>
      <img :src="mockData?.avatar" alt="" class="w-52" />
    </div>
    <div>
      <p>自定义svg图标</p>
      <EpSvg name="rabbit" />
    </div>
    <div>进程通信</div>
    <div class="flex gap-2">
      <el-button type="primary" @click="setTitle">设置窗口标题</el-button>
      <el-button type="primary" @click="openFile">打开文件窗口</el-button>
      <el-button type="primary" @click="openFile2">打开文件窗口2</el-button>
    </div>
    <div v-if="filePath">选择的文件路径：{{ filePath }}</div>
    <p>主进程到渲染进程通信：{{ counter }}</p>
  </div>
</template>

<script setup lang="ts">
  import { useCounterStore } from '/@/store/modules/counter'
  import { getArticleAPI } from '/@/api'
  import { EpSvg } from '/@/components/EpSvg'
  import { IpcRendererEvent } from 'electron'

  const electronAPI = window.electronAPI

  const userStore = useCounterStore()
  const { count, doubleCount } = storeToRefs(userStore)
  const { increment } = userStore
  const { locale } = useI18n()
  const filePath = ref('')
  const counter = ref(0)

  const setTitle = () => {
    electronAPI.setTitle('设置窗口标题')
  }

  const openFile = async () => {
    const res = await electronAPI.openFile()
    filePath.value = res[0]
    console.log('文件路径：', unref(filePath))
  }

  const openFile2 = () => {
    electronAPI.openFile2('打开窗口文件', (_event: IpcRendererEvent, path: string[]) => {
      console.log('文件路径：', path)
      filePath.value = path[0]
    })
  }

  interface UserInfo {
    username: string
    avatar: string
  }

  const mockData = ref<UserInfo>()

  const getData = async () => {
    const res = await getArticleAPI()
    console.log('article', res)
  }

  const updateCounter = () => {
    electronAPI.updateCounter((_event, args) => {
      counter.value += args
    })
  }

  updateCounter()
  getData()

  const lang = computed(() => {
    // return locale.value === 'zh_CN' ? '中文' : '英文'
    return locale.value
  })
  const changeLang = (lang: string) => {
    locale.value = lang
  }

  const getMockData = () => {
    fetch('/mock/userInfo')
      .then((res) => res.json())
      .then((res) => {
        mockData.value = res.data
      })
  }

  getMockData()
</script>

<style scoped></style>
